<template>
    <div v-show="popupShow" class="popup">
        <div class="popup-wrapper clearfox">
            <div class="popup-main">
                <h1 class="name">{{sellers.name}}</h1>
                <div class="star-wrapper">
                    <star :size="48" :score="sellers.score"></star>
                </div>
                <div class="support-wrapper">
                    <navtitle :titletext="discountInfo"></navtitle>
                    <ul class="support">
                        <li v-if="sellers.supports" v-for="item in sellers.supports" class="support-item">
                            <span class="icon" :class=classMap[item.type]></span>
                            <span class="text">{{item.description}}</span>
                        </li>
                    </ul>
                </div>
                <div class="seller-wrapper">
                    <navtitle :titletext="sellerBulletin"></navtitle>
                    <p class="bulletin">{{sellers.bulletin}}</p>
                </div>
            </div>
        </div>
        <div class="popup-close" @click="popupClose">
            <i class="icon-close"></i>
        </div>
    </div>
</template>

<script>
import star from '../star/star.vue';
import navtitle from '../navtitle/navtitle.vue';
export default {
    props:{
        sellers: {   //接收data数据
            type: Object
        },        
        popupShow: {  //是否显示弹层
            type: Boolean
        },
        popupClose: {  //接收关闭弹层的函数
            type: Function
        },
        classMap: {
            type: null
        }
    },
    data () {
        return {
            discountInfo: "优惠信息",
            sellerBulletin: "商家公告"
        }
    },
    components: { 
        star,  //星级评分组件
        navtitle //标题组件
    },
    methods: {
       
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    @import '../../common/scss/mixin.scss';
    .popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background: rgba(7, 17, 27, 0.8);
        z-index: 99;
        /*在苹果手机上才有此效果*/
        backdrop-filter: blur(10px);
        .star-wrapper {
            width: 100%;
            text-align: center;
        }
        .popup-wrapper {
            min-height: 100%;
            width: 100%;
            .popup-main {
                margin-top: 64px;
                padding-bottom: 64px;
                h1.name {
                    text-align: center;
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 32px;
                    margin-bottom: 16px;
                }
                .support-wrapper {
                    .support-item {
                        width: 80%;
                        margin: 0 auto 12px auto;
                        font-size: 0;
                        &:last-child {
                            margin-bottom: 0;
                        }
                        .icon {
                            display: inline-block;
                            width: 16px;
                            height: 16px;
                            background-size: 16px 16px;
                            background-repeat: no-repeat;
                            margin-right: 6px;
                            vertical-align: top;
                            &.decrease {
                                @include bg-image ('decrease_1');
                            }
                            &.discount {
                                @include bg-image ('discount_1');
                            }
                            &.guarantee {
                                @include bg-image ('guarantee_1');
                            }
                            &.invoice {
                                @include bg-image ('invoice_1');
                            }
                            &.special {
                                @include bg-image ('special_1');
                            }
                        }
                        .text {
                            font-size: 12px;
                            line-height: 16px;
                        }
                    }
                }
                .seller-wrapper {
                    .bulletin {
                        width: 80%;
                        padding: 0 24px;
                        margin: 0 auto;
                        font-size: 12px;
                        line-height: 24px;
                    }
                }
            }
        }
        .popup-close {
            position: relative;
            width: 32px;
            height: 32px;
            margin: -64px auto 0 auto;
            clear: both;
            font-size: 32px;
            color: rgba(255, 255, 255, 0.5);
        }
    }
</style>